﻿@using System.ComponentModel
@using Sharp.DataTransferObject
@using Sharp.DataTransferObject.CMS
@model Sharp.WebBooter.Areas.CMS.Models.VIUViewModel
@{
    Layout = null;
}

<style>
    .VIU_Edit .select2 {
        height: 400px;
    }

    .VIU_Edit  legend {
        color: #3c8dbc;
    }

    .VIU_Edit  fieldset label {
        font-weight: normal;
        cursor: pointer;
    }

    .VIU_Edit .field fieldset input[type=checkbox] {
        cursor: pointer;
    }

    .VIU_Edit .thumbnail {
        /*max-height:100px;*/
    }

    #tagsArea .btn {
        margin-bottom: 4px;
    }
</style>
<section class="content-header">
    <h1>
        <a href="javascript:window.app.loadUI('@Url.Action("Create")')">编辑VIU</a>
    </h1>
    <ol class="breadcrumb">
        <li><a href="@Url.Action("Index", "Home")"><i class="fa fa-home"></i> 首页</a></li>
        <li class="">VIU</li>
        <li class="active">VIU管理</li>
    </ol>
</section>

<section class="content VIU_Edit">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-body">
                    @using (Html.Bootstrap().BeginForm(c => c.Horizontal().AddClass("VIUForm")))
                    {
                        <div class="clearfix">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab1" data-toggle="tab">基本信息</a></li>
                                <li><a href="#tab2" data-toggle="tab">领域信息</a></li>
                                <li><a href="#paneCategory" data-toggle="tab">类别</a></li>
                                <li><a href="#tab3" data-toggle="tab">标签</a></li>
                                <li><a href="#tab4" data-toggle="tab">图片和视频</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab1">
                                    @Html.ValidationSummary(false)
                                    @Html.HiddenFor(x => x.TempFlag)
                                    @Html.HiddenFor(x => x.Id)
                                    <div class="col-md-8">
                                        <dl class="dl-horizontal">
                                            <dt>性质：</dt>
                                            <dd data-bind="foreach:natures">
                                                <label class="iCheck ">
                                                    <input type="radio" data-bind="value:value,checked:value" name="nature"> <!--ko text:' ' + name--> <!-- /ko -->
                                                </label>

                                            </dd>
                                        </dl>

                                       
                                        <dl class="dl-horizontal">
                                            <dt><span class="text-danger">*</span> 栏目：</dt>
                                            <dd>
                                                @Html.Bootstrap().DropdownListFor(x => x.ColmunId).DataSource(Model.Colmuns)
                                            </dd>
                                        </dl>
                                        <dl class="dl-horizontal">
                                            <dt><span class="text-danger">*</span> 标题：</dt>
                                            <dd>
                                                <input class="form-control" id="Title" name="Title" placeholder="标题" type="text" data-bind="value:title">
                                            </dd>
                                        </dl>

                                        <dl class="dl-horizontal hidden">
                                            <dt>评级：</dt>
                                            <dd>
                                                <select id="intStars" name="Stars" data-bind="value: stars">
                                                    <option value="1">★</option>
                                                    <option value="2">★★</option>
                                                    <option value="3" selected="selected">★★★</option>
                                                    <option value="4">★★★★</option>
                                                    <option value="5">★★★★★</option>
                                                </select>
                                            </dd>
                                        </dl>

                                        <dl class="dl-horizontal">
                                            <dt>关注度：</dt>
                                            <dd data-bind="foreach:interests">
                                                <label class="iCheck ">
                                                    <input type="radio" data-bind="value:value,checked:$parent.interest,checkedValue:$parent.interest" name="interest"> <!--ko text:' ' + name--> <!-- /ko -->
                                                </label>
                                            </dd>
                                        </dl>
                                        <dl class="dl-horizontal">
                                            <dt>重要性：</dt>
                                            <dd data-bind="foreach:importances">
                                                <label class="iCheck ">
                                                    <input type="radio" data-bind="value:value,checked:$parent.importance,checkedValue:$parent.importance" name="importance"> <!--ko text:' ' + name--> <!-- /ko -->
                                                </label>

                                            </dd>
                                        </dl>


                                        <dl class="dl-horizontal">
                                            <dt>风格：</dt>
                                            <dd data-bind="foreach:styles">
                                                <label class="iCheck ">
                                                    <input type="radio" data-bind="value:value,checked:$parent.style,checkedValue:$parent.style" name="style"> <!--ko text:' ' + name--> <!-- /ko -->
                                                </label>

                                            </dd>
                                        </dl>

                                        <dl class="dl-horizontal">
                                            <dt>其他：</dt>
                                            <dd>
                                                <label>
                                                    <input type="checkbox" name="AllowComment" data-bind="checked:allowComment,value:allowComment"/> 允许评论
                                                </label> <label>
                                                    <input type="checkbox" name="IsElite" data-bind="checked:isElite,value:isElite"/> 推荐
                                                </label> <label>
                                                    <input type="checkbox" name="IsOnTop" data-bind="checked:isOnTop,value:isOnTop"/> 置顶
                                                </label>
                                                <label>
                                                    <input type="checkbox" name="IsHeadline" data-bind="checked:isHeadline,value:isHeadline"/> 头条
                                                </label>
                                            </dd>
                                        </dl>

                                        <dl class="dl-horizontal">
                                            <dt>VIU内容：</dt>
                                            <dd>
                                                <textarea id="editor" type="text" cols="4" data-bind="html:content"></textarea>

                                                <input id="content" name="content" type="hidden" data-bind="value:content"/>
                                            </dd>
                                        </dl>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <label>阅读数：</label>
                                                <div >
                                                    <input type="number"  data-bind="value:hits" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>作者：</label>
                                                <div >
                                                    <input type="text" bind="value:author" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>发生日期：</label>
                                                <div class="input-group date">
                                                    <div class="input-group-addon">
                                                        <i class="fa fa-calendar"></i>
                                                    </div>
                                                    <input type="text" data-bind="value:eventDay" class="form-control date pull-right">
                                                </div>
                                            </div>
 

                                            <div class="form-group">
                                                <label >发生日期：</label>
                                                <div class="input-group date">
                                                    <div class="input-group-addon">
                                                        <i class="fa fa-calendar"></i>
                                                    </div>
                                                    <input type="text" data-bind="value:publishDay" class="form-control date pull-right">
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            <div class="tab-pane" id="tab2">
                                <!--ko foreach:fields-->
                                    <fieldset class="col-md-6">
                                        <legend data-bind="text: $index()+1 +'、'+ name"></legend><!--ko foreach:children-->
                                        <label>
                                            <input type="checkbox" name="FieldIds" data-bind="value:id,checked:$root.fieldIds"/><!--ko text:' ' + name--> <!-- /ko -->
                                        </label><!-- /ko -->
                                    </fieldset>
                                <!-- /ko -->

                            </div>
                            <div class="tab-pane" id="paneCategory">

                                <!--ko foreach:categories-->
                                <fieldset class="col-md-6">
                                    <legend>
                                       
                                            <input type="checkbox" name="categoryId" bind="value:id,checked:selected,click:itemClick"/>
                                            <!--ko text:$index()+1 +'、'+ name-->
                                            <!-- /ko -->
                                        
                                    </legend>
                                    <!--ko foreach:children-->
                                    <label>
                                        <input type="checkbox" name="categoryId" data-bind="value:id,checked:selected,click:itemClickFuc"/><!--ko text:' ' + name--> <!-- /ko -->
                                    </label>

                                    <!-- /ko -->
                                </fieldset>
                                <!-- /ko -->

                            </div>
                                <div class="tab-pane" id="tab3">
                                    <fieldset class="col-md-3">
                                        <legend>已选</legend>
                                        <label data-bind="visible:saveVIUPropertys().length<=0">没有已选VIU属性</label>
                                        <div style="line-height: 34px" data-bind="foreach:saveVIUPropertys">
                                            <button class="btn btn-success" type="button" data-bind="text:name,click:unselect"></button>
                                            <input type="hidden" data-bind="value:id" name="tagIds" />
                                        </div>
                                    </fieldset>

                                    <fieldset class="col-md-9">
                                        <legend>候选</legend>
                                        <div class="row">
                                            <div class="col-md-8">
                                                类别：
                                                <!--ko foreach:VIUPropertys-->
                                                <label class="iCheck">
                                                    <input type="checkbox" name="PropertyIds" data-bind="value:id,checked:selected"> <!--ko text:' ' + name--> <!-- /ko -->
                                                </label><!-- /ko -->
                                            </div>
                                            <div class="col-md-4">
                                                <div class="input-group SearchArea">
                                                    <input type="text" data-bind="value:keyword" class="form-control" placeholder="名称">
                                                    <div class="input-group-btn">
                                                        <button type="button" class="btn btn-default" data-bind="click:search"><i class="fa fa-search"></i></button>
                                                        <button type="button" class="btn btn-default" title="高级查询" id="toggle-advanced-search">
                                                            <i class="fa fa-angle-double-down"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="div-advanced-search" style="display: none;" class="row">
                                            <div class="col-md-12">
                                                <span>缩写：</span>
                                                <div class="btn-group btn-group-xs" data-bind="foreach:initialList">
                                                    <button class="btn btn-default" type="button" data-bind="click:$root.search,text:name,click:$root.initialClick,attr:{'class':'btn '+ style()}"> </button>

                                                </div>

                                            </div>
                                        </div>
                                        <div class="row" style="line-height: 28px">
                                            <!--ko foreach:pagedList-->
                                            <button class="btn btn-primary btn-xs" type="button" data-bind="text:name,click:itemClick,disable:selected"></button>
                                            <!-- /ko -->
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="pull-left">
                                                    总共有<span data-bind="text: totalCount"></span>条记录， 每页显示：<span data-bind="text: pageSize"></span>条
                                                </div>
                                                <div class="pull-right">
                                                    <ul class="pagination pagination-sm">
                                                        <li data-bind="css: { disabled: pageIndex() === 0 }"><a href="#" data-bind="click: previousPage"><i aria-hidden="true" class="fa fa-angle-left"></i></a></li>
                                                        <!--ko foreach:allPages-->
                                                        <li data-bind="css: { active: $data.pageNumber === ($root.pageIndex() + 1) }"><a href="#" data-bind="text: $data.pageNumber, click: function() { $root.moveToPage($data.pageNumber-1); }">1</a></li>
                                                        <!-- /ko -->
                                                        <li data-bind="css: { disabled: pageIndex() === maxPageIndex() }"><a href="#" data-bind="click: nextPage"><i aria-hidden="true" class="fa fa-angle-right"></i></a></li>
                                                    </ul>

                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                                <div class="tab-pane" id="tab4">


                                    <dl class="dl-horizontal">
                                        <dt>上传：</dt>
                                        <dd>
                                            <input id="file-4" type="file" class="file" multiple="multiple" />

                                        </dd>
                                    </dl>

                                    <dl class="dl-horizontal">
                                        <dt>图集：</dt>
                                        <dd style="min-height:183px">
                                            <div class="row col-md-12" data-bind="foreach:multiMedias">
                                                <div class="col-sm-6 col-md-3" draggable="true">
                                                    <div class="thumbnail">
                                                        <img data-bind="attr:{src:src}" draggable="false" src="#" alt="图片附件">
                                                        <div class="file-actions">
                                                            <div class="file-footer-buttons">
                                                                <button title="设为封面" data-bind="click:function(data){ data.default($root); }" class="btn btn-xs btn-default" type="button"><i class="fa fa-book" data-bind="attr:{'class':isDefault()?'fa fa-book label-danger':'fa fa-book'}"></i></button>
                                                                <button title="删除文件" data-bind="click:function(data){ data.removeMe($root); }" class="btn btn-xs btn-default btn-danger" type="button"><i class="glyphicon glyphicon-trash text-white"></i></button>
                                                                <button title="查看详情" class="btn btn-xs btn-default" type="button"><i class="glyphicon glyphicon-zoom-in"></i></button>
                                                            </div>

                                                            <div class="clearfix"></div>
                                                        </div>
                                                        <input type="hidden" data-bind="value:id,attr:{name:'multiMedias['+$index()+'].Id'}" />
                                                        <input type="hidden" value="1" data-bind="attr:{name:'multiMedias['+$index()+'].Type'}" />
                                                        <input type="hidden" data-bind="value:src,attr:{name:'multiMedias['+$index()+'].PicUrl'}" />
                                                        <input type="hidden" data-bind="value:isDefault,attr:{name:'multiMedias['+$index()+'].isDefault'}" />
                                                    </div>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                            </div>
                        </div>
                    }
                </div>
                <div class="box-footer text-center box-outfooter">

                    <button class="btn btn-primary" data-bind="click:saveForm"><i class="fa fa-save"></i> 保存</button>

                </div>
            </div>
        </div>
    </div>

</section>
<script src="~/Areas/CMS/ViewModel/VIU/Edit.js"></script>

<script>
    var fieldList = @MvcHtmlString.Create(Model.Fields.ToJson());
    var categoryList = @MvcHtmlString.Create(Model.Categories.ToJson());
 

    var vm = new VIU_Edit_ViewModel();
    vm.biuldPropertyData(categoryList);
 
    @foreach (Enum e in Enum.GetValues(typeof(VIUDTO.VIUInterest)))
    {
        @MvcHtmlString.Create(string.Format("vm.interests.push({{ name:'{0}',value:'{1}'}});\r\n", e.ToString(), Convert.ToInt32(e)))
    }
    @foreach (Enum e in Enum.GetValues(typeof(VIUDTO.VIUImportance)))
    {
        @MvcHtmlString.Create(string.Format("vm.importances.push({{ name:'{0}',value:'{1}'}});\r\n", e.ToString(), Convert.ToInt32(e)))
    }
    @foreach (Enum e in Enum.GetValues(typeof (VIUDTO.VIUStyle)))
    {
        @MvcHtmlString.Create(string.Format("vm.styles.push({{ name:'{0}',value:'{1}'}});\r\n", e.GetDescription(), Convert.ToInt32(e)))
    }
 
    fieldList.forEach(function (item, index) {
        vm.fields.push(item);
    });
    vm.init('@Model.Id');
    ko.applyBindings(vm, $(".VIU_Edit")[0]);

    var uploader = $("#file-4");
    uploader.fileinput({
        uploadUrl: '@Url.Action("ReceivePic")',
        language: 'zh', //设置语言
        showPreview: false,
        showUpload: true, //是否显示上传按钮
        showCaption: true,//是否显示标题
        uploadAsync: true, showDrag: true,
        allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀
        uploadExtraData: {
            tempFlag: '@Model.TempFlag'
        }
    })
        .on("filebatchuploadsuccess", function (event, data, previewId, index) {
            //上传成功的一系列操作 ，  比如一些 刷新图片列表
            alert("filebatchuploadsuccess");
        })
        .on("fileuploaded", function (event, data, previewId, index) {

            var pvm = new PictrueViewModel();
            pvm.src = data.response.Data;
            vm.multiMedias.push(pvm);
        });

    $("#toggle-advanced-search").click(function () {
        $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
        $("#div-advanced-search").slideToggle("fast");
    });
    $('.date').datepicker({
        autoclose: true,
        format:"yyyy/mm/dd"
    });

</script>